// 状态接口、属性接口
// 断言
import React from 'react';
interface Istate{
    text:string,
    list:string[],
    name:string
}
//<属性,状态>
class App extends React.Component<any,Istate>{
    state={
        text:'hhh',
        list:[],
        name:'dddddd'
    }
    myref=React.createRef<HTMLInputElement>() //定义类型
  render(){
    return (
        <div>
            <input ref={this.myref}/>
            <button onClick={()=>{
                console.log((this.myref.current as HTMLInputElement).value) //断言 因为input元素有value属性
                this.setState({
                    list:[...this.state.list,(this.myref.current as HTMLInputElement).value],
                    text:''
                })

            }}>add</button>
            {this.state.list.map((item,index)=>
                <li key={index}>{item}</li>
            )}
            <Child name={this.state.name} changeName={()=>{
                this.setState({
                    name:'rrrrrrrr'
                })
            }}/>
        </div>
    );
  }
}


interface IProps{
    name:string,
    changeName:()=>void
}
class Child extends React.Component<IProps,any>{
    render(){
        return <div onClick={()=>{
            this.props.changeName()
        }}>{this.props.name}</div>
    }
}

export default App;
